<template>
  <div class="shopCar-tab">
    
          <!-- 商品列表区域 -->
          <div class="mui-card" v-for="(item,i) in ShopInfo" :key="item.id" >
              <div class="mui-card-content">
                <div class="carinfo">
                  <mt-switch v-model="$store.getters.getShopSelected[item.id]" @change="addtoggle(item.id)"></mt-switch>
                  <img :src="item.thumb_path" alt=""/>
                  <div class="info">
                    <h1>{{item.title}}</h1>
                    <p>
                      <span class="price">￥{{item.sell_price}}</span>
                      <shopCar :count="$store.getters.getShopcount[item.id]" :shopid="item.id"></shopCar>
                      <a class="del" @click.prevent="remove(item.id,i)">删除</a>
                    </p>
                  </div>
                </div>
              </div>   
          </div>

          <!-- 当购物车为空时默认显示 -->
          <div class="mui-card" v-if="ShopInfo.length ==0 ? true : false">
                <div class="mui-card-content">
                   <div class="remind">
                     <h2>你的购物车空空如也</h2>
                      <h2>请添加商品至购物车</h2>
                  </div>  
                      
                  
                </div>
            </div>
            <!-- 结算区域 -->
        <div class="mui-card">
          <div class="mui-card-content">
              <div class="mui-card-content-inner settlement">
                  <div class="info">
                  <p>总计（不含运费）</p>
                  <p>已勾选商品 <span>{{$store.getters.getcomputedCount}}</span> 件，总价: <span>￥{{$store.getters.getTotalprice}}</span></p>
                  </div>
                    <mt-button type="danger" size="normal" style="width:100px;">去结算</mt-button>
              </div>
          </div>
        </div>
  </div>
</template>

<script>
import shopCar from '../subcomponents/shopcar_numbox.vue'
export default {
  data(){
    return{
      value:false,
      ShopInfo:[]
    }
  },
  created(){
    this.getShopinfo()
  },
  methods:{
      getShopinfo(){
        //id获取本地存储的store数据的id,然后api才能分别取得要请求的id
        var idArr =[]
        this.$store.state.shopcar.forEach(item => {
          idArr.push(item.id)
        });

        if(idArr.length<=0){
          return;
        }
          this.$http.get('api/goods/getshopcarlist/'+idArr.join(",")).then(result=>{
            if(result.body.status ===0){
              this.ShopInfo=result.body.message
            }
          })
      },
      remove(id,index){
        //id是要删除state中的数据，i是当前标签
        this.ShopInfo.splice(index,1)
        this.$store.commit('removeShopInfolist',id)
      },
      addtoggle(id){
        this.$store.commit('setShopSelected',id)
      }
  },
  components:{
    shopCar
  }
}

</script>

<style lang="scss" scoped>
.shopCar-tab{
  background-color: #ccc;
    overflow: hidden;
    .carinfo{
       display: flex;
      align-items: center;
      padding: 10px;
    }
    .remind{
      text-align: center;
      padding: 20px;
    }
    .settlement{
      display: flex;
      justify-content: space-between;
    }
    img{
      width: 60px;
      height: 60px;
    }
    h1{
      font-size: 13px;
    }
    .info{
      span{
        color:red;
        font-weight: bold;
        font-size: 18px;
      }
      p{
        margin-top: 15px;
      }
      .price{
        color: red;
       }
    }
  
    .mui-card-content-inner{
      display: flex;
      align-items: center;
    }
}
</style>
